import { useContext, useEffect, useState, type FC } from "react";

import styles from "./index.module.less";
import { Badge } from "@supcon/supcon-5t-design";
import LineContent from "./LineContent";
import spot from "@/assets/css/images/圆点.svg";
import { BigScreenContext } from "@/pages/BigScreen/context/BigScreenContext";
import BGEmpty from "../../../BGEmpty";

const PathContainer: FC = () => {
  // const steps = ["第1步", "第2步", "第3步", "第4步"];

  const { currentKey, pathJson } = useContext(BigScreenContext);
  const [info, setInfo] = useState<any>({});

  useEffect(() => {
    if (currentKey === "path") {
      setInfo(pathJson);
    }
  }, [currentKey, pathJson]);

  if (info.constructor === Object && Object.keys(info).length === 0) {
    return <BGEmpty />;
  }
  return (
    <div className={styles["path-container"]}>
      <div className={styles["path-container-content"]}>
        {info.path.map((item, idx) => (
          <div key={idx} style={{ flex: 1 }}>
            <div className={styles["path-container-content-title"]}>
              <img src={spot} alt="spot"></img>
              <div className={styles["path-container-content-title-text"]}>
                {item.desc}
              </div>
            </div>
            <div
              style={{
                display: "flex",
                userSelect: "none",
                width: "24rem",
              }}
            >
              <table
                className={styles["path-container-content-table"]}
                style={{
                  boxShadow:
                    item.value.length > 5
                      ? "0.1rem 0rem 0.1rem 0rem rgba(68,106,187,0.3)"
                      : "",
                  paddingBottom: item.value.length > 5 ? "0.8rem" : "",
                }}
              >
                <thead>
                  <tr>
                    <th
                      className={
                        styles["path-container-content-table-first-line"]
                      }
                    ></th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td
                      className={
                        styles["path-container-content-table-first-line"]
                      }
                    >
                      目标设定值（℃）
                    </td>
                  </tr>
                  <tr>
                    <td
                      className={
                        styles["path-container-content-table-first-line"]
                      }
                    >
                      调整时间（h）
                    </td>
                  </tr>
                </tbody>
              </table>

              <div
                className={styles["path-container-content-table-mid-wrapper"]}
                style={{
                  overflowX: "auto",
                  flex: item.value.length > 5 ? 1 : "none",
                  // width: `${4.6 * (item.value.length - 2)}rem`,
                }}
              >
                <table className={styles["path-container-content-table"]}>
                  <thead>
                    <tr>
                      {item.value.slice(1, -1).map((temp, i) => (
                        <th key={i}>{`第${i + 1}步`}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      {item.value.slice(1, -1).map((temp, i) => (
                        <td key={i} style={{ padding: 0 }}>
                          <div
                            className={
                              styles["path-container-content-table-number"]
                            }
                          >
                            {temp}
                          </div>
                        </td>
                      ))}
                    </tr>
                    <tr>
                      {item.time.slice(1, -1).map((time, i) => (
                        <td key={i} style={{ padding: 0 }}>
                          <div
                            className={
                              styles["path-container-content-table-number"]
                            }
                          >
                            {time}
                          </div>
                        </td>
                      ))}
                    </tr>
                  </tbody>
                </table>
              </div>

              <table
                className={styles["path-container-content-table"]}
                style={{
                  boxShadow:
                    item.value.length > 5
                      ? "-0.1rem 0rem 0.1rem 0rem rgba(68,106,187,0.3)"
                      : "",
                  paddingBottom: item.value.length > 5 ? "0.8rem" : "",
                  // width: "4rem",
                }}
              >
                <thead>
                  <tr>
                    <th>{`第${item.value.length - 1}步`}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td style={{ padding: 0 }}>
                      <div
                        className={
                          styles["path-container-content-table-number"]
                        }
                      >
                        {item.value[item.value.length - 1]}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style={{ padding: 0 }}>
                      <div
                        className={
                          styles["path-container-content-table-number"]
                        }
                      >
                        {item.time[item.time.length - 1]}
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div key={idx} style={{ marginBottom: "0.5rem" }}>
              <LineContent record={item}></LineContent>
            </div>
          </div>
        ))}
      </div>

      <div className={styles["path-container-footer"]}>
        <div className={styles["path-container-footer-left"]}>
          <div className={styles["path-container-footer-left-time"]}>
            <Badge
              color="#FFFFFF"
              text={
                <span style={{ color: "#FFFFFF", fontSize: "0.6rem" }}>
                  最后执行时间: {info.finalExecuteTime}
                </span>
              }
            />
          </div>
          <div className={styles["path-container-footer-left-time"]}>
            <Badge
              color="#FFFFFF"
              text={
                <span style={{ color: "#FFFFFF", fontSize: "0.6rem" }}>
                  下次执行时间: {info.nextExecuteTime}
                </span>
              }
            />
          </div>
        </div>
        <div className={styles["path-container-footer-right"]}>
          <div className={styles["path-container-footer-right-title"]}>
            剩余调整时间
          </div>
          <div className={styles["path-container-footer-right-tag"]}>
            {info.timeInfo[0].remainTime}
            {info.timeInfo[0].remainTimeUnit}
          </div>
        </div>
      </div>
    </div>
  );
};

export default PathContainer;
